<template>
  <!-- 无线滚动 -->
  <div
    v-infinite-scroll="load"
    style="
      overflow: auto;
      height: 1000px;
      margin-top:15px
      padding: 0px;
      margin: 0px;
    "
  >
    <el-card
      class="article-card"
      v-for="o in count"
      :key="o"
      style="height: 980px"
    >
      <!-- 循环遍历文章模板 -->

      <div
        v-for="item in articleTable"
        :key="item.id"
        style="padding: 0px; margin: 0px"
      >
        <!-- 左边图片部分 -->
        <el-row type="flex" class="row-bg">
          <el-col :span="14">
            <el-card class="img-card">
              <div style="height: 180px; width: 320px; overflow: hidden">
                <router-link :to="'/home/newsinfo/' + item.id"
                  ><img :src="item.articleSurface" class="image"
                /></router-link>
              </div>
            </el-card>
          </el-col>
          <el-col>
            <!-- 右边标题和简介 -->
            <div class="article-mid">
              <router-link :to="'/home/newsinfo/' + item.id">
                <h2>{{ item.articleTitle }}+{{ item.id }}</h2> </router-link
              ><br />
              <p class="intro">
                {{ item.articleExplain }}
              </p>
              <!-- 文章简介下四个显示的小标签 -->
              <div class="display-function">
                <el-tag size="medium" type="info"
                  >点赞数量:{{ item.sumPraises }}</el-tag
                >
                <el-tag size="medium" type="info"
                  >评论数量:{{ item.sumCom }}</el-tag
                >
                <el-tag size="medium" type="info"
                  >阅读数量:{{ item.sumRead }}</el-tag
                >
                <el-tag size="medium" type="info"
                  >发布日期:{{ item.createdTime }}</el-tag
                >
              </div>
            </div>
          </el-col>
        </el-row>
        <hr />
      </div>
    </el-card>
  </div>
</template>


<script>
import { byIdGetArticle } from "../api/read";
import common from "../uitls/common";

export default {
  data() {
    return {
      localhostPath: common.localhostPath,

      count: 1,
      //文章数组
      menus: [],
      //图片地址
      verifyCode: "",
      clickedData: [],
      //储存通过文章类型找到的文章
      articleTable: [],
    };
  },
  //自定义prop
  props: ["ArticleTypeId"],

  // ArticleTypeId
  mounted() {
    this.getArticleType();
  },
  methods: {
    load() {
      this.count += 1;
    },
    getArticleType() {
      byIdGetArticle(this.ArticleTypeId)
        .then(({ data }) => {
          console.log(data.data);

          data.data.map((item) => {
            if (item.articleSurface == null) {
              item.articleSurface = require("../YYB/img/2333296zENB.jpg");
              console.log(item.articleSurface);
            } else {
              item.articleSurface = this.localhostPath + item.articleSurface;
            }
            return item;
          });
          let newArr = data.data;
          newArr.reverse();
          this.articleTable = newArr;

          // newArr.forEach(element => {
          //   if(element.articleSurface==null){
          //     getAllPicture().then(({data})=>{
          //       console.log(data.data);
          //       let Ro=data.data;
          //       Ro.forEach(item=>{
          //         if(item.isEnable==true && item.isDelete==false)
          //       })
          //     }).catch((err)=>{
          //       console.log(err);
          //     })
          //   }
          // });
        })
        .catch((err) => {
          console.log(err);
        });
      console.log(this.ArticleTypeId);
    },
  },

  computed: {},
};
</script>

<style scoped>
.display-function {
  color: #666;
  padding-top: 35px;
}

/* 点赞评论数量标签 */
.el-tag.el-tag--info {
  margin-left: 5px;
}
/* 首页标题靠左 */
h2 {
  display: flex;
  justify-content: flex-start !important;
}
/* 标题和简介靠右 */
.article-mid {
  float: left;
}
.img-card {
  width: 360px;
  padding: 0 !important;
}

/* 文章内容框 */
p.intro {
  font-size: 14px;
  line-height: 24px;
  overflow: hidden;
  height: 100px;
  margin-bottom: 8px;
  color: #666;
}
</style>